<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>英-时间轴</title>
  <link href="../static/images/me.jpg" th:href="@{/images/me.jpg}" rel="icon" type="image/x-ico">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
  <link rel="stylesheet" href="../static/css/timeline.css" th:href="@{/css/timeline.css}">
</head>
<body>

  <!--导航-->
  <nav class="gird-header">
    <div class="ui container">
      <div class="ui inverted secondary stackable menu">
        <h2 class="ui olive header item" style="font-family: STSong">英</h2>
        <a th:href="@{/}" class=" m-item item"><i class="home icon"></i>首页</a>
        <a th:href="@{/types/0/1}" class="m-item item"><i class="clone outline icon"></i>分类</a>
        <a th:href="@{/archives}" class="active m-item item"><i class="clock icon"></i>时间轴</a>
        <a th:href="@{/message}" class="m-item item"><i class="book icon"></i>留言板</a>
        <a th:href="@{/about}" class=" m-item item"><i class="info icon"></i>关于我</a>

        <div class="right m-item item m-mobile-hide">
          <form name="search" action="#" method="post" target="_blank">
            <div class="ui icon transparent input m-margin-tb-tiny" style="color: white">
              <input style="color: white" type="text" name="query" placeholder="Search...." >
              <i onclick="document.forms['search'].submit()" class="search link icon"></i>
            </div>
          </form>
        </div>

        <a shiro:notAuthenticated class="right m-item item m-mobile-hide item" th:href="@{/login}">登录/注册</a>
        <a shiro:hasAnyRoles="user" class="right m-item item m-mobile-hide item" th:href="@{/logout}">退出</a>

      </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
      <i class="sidebar icon"></i>
    </a>
  </nav>

<!--时间轴内容-->
  <div class="doc-container m-padded-tb-massivex m-opacity" id="doc-container">
      <th:block >
        <section class="timeline">
          <ul>

            <li class="" th:each="archive:${archives}" >
              <div>
                <time th:text="${archive.createTime}">2020/01/01</time>
                <div class="scientist" >
                    <a href="#" target="_blank">
                      <h3 class="state" style="text-align:center;font-size: 16px;color: #000;" th:text="${archive.headine}">文章标题</h3>
                    </a>
                </div>
              </div>
            </li>

          </ul>
        </section>
      </th:block>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
  <script src="../static/lib/timeline/timeline.js" th:src="@{/lib/timeline/timeline.js}"></script>


  <script>
    $('.menu.toggle').click(function () {
      $('.m-item').toggleClass('m-mobile-hide');
    });
  </script>
</body>
</html>